<template>
    <div ref="contentRow" class="container-narrow">
        <div class="watermark-div">
            <!--一56个水印可以恰好覆盖一整页-->
            <div v-for="i in 56" :key="i" class="watermark">
                {{reportTemplate.infoWatermark}}
            </div>
        </div>
        <el-row class="text-mini">
            <el-col :span="12">
                <span>{{reportTemplate.updateTime}}</span>
            </el-col>
        </el-row>
        <!-- Header -->
        <el-row style="margin-top: 20px; min-height: 60px;display: flex;justify-content: center;">
            <el-col :span="12">
                <img :src="reportTemplate.infoImageUrl"
                 style="height:60px;width:100%;" alt=""/>
            </el-col>
        </el-row>
            <h3 style="text-align:center;">{{reportTemplate.infoInstitutionName}}</h3>
        <el-row>
            <h5 style="text-align:center;">{{reportTemplate.infoTitle}}</h5>
        </el-row>
        <el-row>
            <el-col :span="10" :offset="14">
                <h4 style="color: rgb(217, 149, 148);">病理号：</h4>
            </el-col>
        </el-row>
        <hr>
        <el-row style="margin-top: 12px; font-size: 15px">
            <grid-layout
                    :layout.sync="componentList"
                    :col-num="reportTemplate ? reportTemplate.settingsColNum : 12"
                    :row-height="24"
                    :is-draggable="false"
                    :is-resizable="false"
                    :is-mirrored="false"
                    :vertical-compact="true"
                    :use-css-transforms="true">
                <grid-item v-for="(item, index) in componentList"
                           :x="item.x"
                           :y="item.y"
                           :w="item.w"
                           :h="item.h"
                           :i="item.i"
                           :key="index">
                    <el-row v-if="item.smallType === 'space'"
                            class="row-in-grid-item"></el-row>

                    <hr v-else-if="item.smallType === 'hr'">

                    <el-row v-else-if="item.smallType === 'text'"
                            class="row-in-grid-item">
                        <span :style="styleString(item.styleJson)">
                            {{ item.stringContent }}
                        </span>
                    </el-row>

                    <el-row v-else-if="item.smallType === 'input'" class="row-in-grid-item">
                        <span :style="styleString(item.styleJson) + 'color: darkgray'">
                            {{ item.placeholder }}
                        </span>
                    </el-row>

                    <el-row v-else-if="item.smallType === 'selection'" class="row-in-grid-item">
                        <span :style="styleString(item.styleJson) + 'color: darkgray'">
                            {{ item.placeholder }}
                        </span>
                    </el-row>

                    <el-row v-else-if="item.smallType === 'special'" class="row-in-grid-item">
                        <!--病理图像判断-->
                        <div v-if="item.i === 'special_normal_pathologyFiles'"
                             style="width: 100%; height: 100%">
                            <span style="float: left">{{item.stringContent}}</span>
                        </div>
                        <!--签名图像-->
                        <div v-else-if="item.i === 'special_base_reportDoctor'">
                            <span>{{item.stringContent}}</span>
                        </div>
                    </el-row>
                </grid-item>
            </grid-layout>
        </el-row>
        <el-row class="row-in-grid-item">
            <span>{{reportTemplate.infoRemark}}</span>
        </el-row>
    </div>
</template>

<script>
export default {
  name: 'InstitutionReportTemplatesPreview',
  data() {
    return {
      reportTemplateId: 0,
      reportTemplate: {
        id: 1,

        createUserId: null,
        updateUserId: 1,
        updateTime: '2019-12-05 03:53:59',
        remark: '备注信息修改',
        isDelete: 0,
        institutionId: 1,
        checkCategory: 517,
        checkCategoryName: '常规病理',
        status: 1,
        settingsRemark: null,
        settingsDeadline: 2,
        settingsSpecimenCategory: null,
        settingsSpecimenCategoryName: null,
        settingsNeedFinalJudge: 0,
        settingsColNum: 12,
        infoImageUrl: null,
        infoInstitutionName: null,
        infoTitle: null,
        infoWatermark: null,
        infoRemark: '备注：',
      },
      componentList: [
        {
          id: 0,
          name: 'string',
          i: 'string',
          x: 0,
          y: 0,
          w: 4,
          h: 1,
          moved: 0,
          bigType: 'string',
          smallType: 'string',
          stringContent: 'string',
          style: '',
          styleJson: {},
          placeholder: 'string',
          isInputArea: 0,
          selectData: 'string',
          selectDataJson: [],
          selectType: 0,
        },
      ],
    };
  },
  mounted() {
    // console.log('id', this.$route.params.id);
    this.reportTemplateId = this.$route.params.id;
    this.reportTemplateRequest();
  },
  methods: {
    async reportTemplateRequest() {
      try {
        await this.$axios({
          // 详见 axios 请求配置项
          method: 'GET',
          url: `/PROXY-Remote/report-templates/${this.reportTemplateId}`,
        }).then((res) => {
          // 请求失败
          if (res.data.code !== 200) {
            throw new Error(res.data);
          }

          // 请求成功
          const result = res.data.data;
          Object.keys(this.reportTemplate).forEach((key) => {
            this.reportTemplate[key] = result[key];
          });
          this.componentList = [];
          result.reportTemplateComponents.forEach((t) => {
            this.componentList.push(t);
          });
        });
      } catch (e) {
        console.log('e', e);
        // 跳出
      }
    },
    styleString(styleJson) {
      let style = 'width: 100%; word-break:break-all;';
      Object.keys(styleJson).forEach((key) => {
        style += `${key}:${styleJson[key]};`;
      });
      return style;
    },
  },
};
</script>

<style scoped>
    /* Custom container */
    .container-narrow {
        margin: 0 auto;

        max-width: 750px;

        height: max-content;

        background: #ffffff;

        padding: 20px;
    }

    hr {
        margin: 0;
        border: 0;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0 0;
    }

    h3 {
        font-size: 25px;
        font-weight: 900;
    }

    h4 {
        font-size: 18px;
        font-weight: 900;
    }

    h5 {
        font-size: 16px;
        font-weight: 900;
    }

    .text-mini {
        font-size: 12px;
    }

    .row-in-grid-item {
        min-height:24px;

        display:flex;

        align-items:center;
    }
    .watermark-div {
        position: fixed;

        width: 750px;

        margin-top: 10px;
    }
    .watermark
    {
        opacity: 0.3;
        z-index: 99;
        color: gray;
        font-size: 20px;
        width: 185px;
        height: 80px;
        transform: rotate(-20deg);
        float: left;
    }
</style>
